<script setup lang="ts">
import { gethotCourseList } from '@/api/user';
import { onMounted } from 'vue';
function onClickLeft() {
    history.back()
}
import { ref } from 'vue';
import type { Ref } from 'vue';

interface iCourse {
    courseTitle: string,
    courseteacher: string,
    stucount: string,
    stars: string,
    id:number
}
const hotCourseList: Ref<Array<iCourse>> = ref([]);
onMounted(() => {
    gethotCourseList({}).then(res => {
        console.log(77, res.data);
        hotCourseList.value = res.data.hotCourseList
    })
})
</script>
<template>
    <!-- 更多课程 -->
    <div class="center">

        <header>
            <van-nav-bar left-text="返回" title="课程设计列表" left-arrow @click-left="onClickLeft" />
        </header>
        <main>
            <van-cell title="IT 开发" />
            <div v-for="item in hotCourseList" :key="item.id" class="courselist" @click="$router.push('/home/summary/${item.id}')">
                <div class="left">
                    <van-image width="100" height="100" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
                </div>
                <div class="right">
                    <p style="font-size: 0.16rem;margin-bottom: 0.1rem">{{ item.courseTitle }}</p>
                    <p>{{ item.courseteacher }}</p>
                    <p>
                        <p>
                        <van-image style="width: 12px;"
                            src="https://cdn7.axureshop.com/demo2023/2246171/images/11-%E8%AF%BE%E7%A8%8B%E5%88%97%E8%A1%A8-%E8%AE%BE%E8%AE%A1it/%E5%BD%A2%E7%8A%B6_u546.svg">

                        </van-image>
                        
                            <span style="display: inline-block;width: 120px;">{{ item.stucount }}学员 
                             </span>
                            <!-- 渲染红色的星星 -->
                            <span v-for="n in item.stars " :key="n" style="color: gold; font-size: 0.12rem;">⭐</span>
                       
                        </p>
                    
                    </p>
                    <router-link to="/home/summary/${item.id}"></router-link>
                </div>
            </div>

        </main>
    </div>
</template>
<style scoped lang="scss">
/* .van-card {
    background-color: transparent !important;

}

.van-card img {
    background-color: transparent !important;
} */
.center {

    // display: flex;
    // flex-direction: column;
    header {
        height: 50px;

    }

    main {
        height: calc(100vh - 50px);
        overflow: auto;
    }
}

.courselist {
    box-sizing: border-box;
    padding: 2vw 2vw 2vw 4vw;
    display: flex;

    .left {
        width: 100px;
        margin-right: 2vw;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .right {
        flex: 1;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}
</style>